<template>
  <div class="classroom-page">
    <div class="page-left">
      <courseRecordLeft
        v-model:course-id="params.courseExerciseId"
        v-model:course-index="params.courseIndex"
        v-model:course-date="params.courseDate"
        @change="courseChange"
      />
    </div>
    <div class="page-right">
      <div class="base-info">
        <div class="date-text">{{ params.courseDate }}-第{{ params.courseIndex }}节</div>
        <div class="num-wrap">
          <div class="num-item">
            <img src="@/assets/img/classroom/people.png" alt="参与学生数" />
            <div class="label">参与学生数 {{ courseData.studentTotal }}人</div>
          </div>
          <div class="hr"></div>
          <div class="num-item">
            <img src="@/assets/img/classroom/finish.png" alt="完成情况" />
            <div class="label">完成情况 {{ totalData.complete }}/{{ totalData.total }}</div>
          </div>
          <div class="hr"></div>
          <div class="num-item mr">
            <img src="@/assets/img/classroom/star.png" alt="综合表现" />
            <div class="label">综合表现</div>
          </div>
          <div class="num-item mr">
            <img src="@/assets/img/classroom/excellent.png" alt="优秀" />
            <div class="label">X {{ totalData.scope3 }}</div>
          </div>
          <div class="num-item mr">
            <img src="@/assets/img/classroom/good.png" alt="良好" />
            <div class="label">X {{ totalData.scope2 }}</div>
          </div>
          <div class="num-item">
            <img src="@/assets/img/classroom/commonly.png" alt="一般" />
            <div class="label">X {{ totalData.scope1 }}</div>
          </div>
        </div>
      </div>
      <n-scrollbar style="height: calc(100% - 78px)">
        <div class="student-wrap">
          <studentRadarItem v-for="(item, i) in courseData.listData" :key="i" :studentInfo="item.studentInfo" :wordNum="item.wordNum" :score-icon="item.scoreIcon" :radarData="item.radarData" />
        </div>
        <empty v-if="courseData.listData.length === 0" style="height: 888px" />
      </n-scrollbar>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive, onBeforeMount, computed } from 'vue';
  import { getCourseStudentExerciseList } from '@/api/course/index';
  import {useCourse} from '@/store/modules/course';
  import studentRadarItem from '@/views/components/studentRadarItem/index.vue';
  import courseRecordLeft from './components/courseRecordLeft.vue';

  const params = reactive({
    courseExerciseId: '',
    courseIndex: 1,
    courseDate: '',
  });
  const courseData = reactive({
    studentTotal: 0,
    listData: [],
  });
  const totalData = ref({
    total: 0,
    complete: 0,
    scope1: 0,
    scope2: 0,
    scope3: 0,
  });
  onBeforeMount(() => {});
  async function courseChange() {
    const res = await getCourseStudentExerciseList({
      courseExerciseId: params.courseExerciseId,
    });
    const tempTotalData = {
      total: 0,
      complete: 0,
      scope1: 0,
      scope2: 0,
      scope3: 0,
    }
    courseData.listData = res.map(item => {
      const integralResult: any = useCourse().calcIntegralSettingData(item.score)
      tempTotalData.complete+=item.realCount;
      tempTotalData.total+=item.totalCount;
      if (integralResult.scope === 1) {
        tempTotalData.scope1++;
      } else if (integralResult.scope === 2) {
        tempTotalData.scope2++;
      } else if (integralResult.scope === 3) {
        tempTotalData.scope3++;
      }
      return {
        studentInfo: {
          id: item.studentId,
          pic: item.studentPic,
          name: item.studentName
        },
        scoreIcon: integralResult.icon,
        radarData: [
          item.orderScore,
          item.structureScore,
          item.speedScore,
          item.strengthScore,
          item.strokeScore,
          item.countScore,
        ],
        wordNum: {
          complete: item.realCount,
          total: item.totalCount,
        },
      }
    });
    courseData.studentTotal = res.length;
    totalData.value = tempTotalData;
  }
</script>

<style lang="less" scoped>
  .classroom-page {
    //position: absolute;
    //left: 0;
    //right: 0;
    //top: 84px;
    //bottom: 0;
    display: flex;
    height: 100%;
    margin: 0 -36px -36px;
    .page-left {
      width: 320px;
      height: 100%;
      overflow: auto;
      //padding: 0 36px;
    }
    .page-right {
      width: 1600px;
      height: 100%;
      border-radius: 24px 24px 0 0;
      background-color: #fff;
      padding: 30px 36px 0 36px;
      .base-info {
        height: 48px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;
        .date-text {
          font-size: 36px;
          line-height: 48px;
          color: #1e232b;
        }
        .num-wrap {
          display: flex;
          align-items: center;
          .hr {
            margin: 0 18px;
            background-color: #dce0e5;
            width: 2px;
            height: 15px;
          }
          .num-item {
            display: flex;
            font-size: 21px;
            line-height: 28px;
            &.mr {
              margin-right: 16px;
            }
            img {
              width: 28px;
              height: 28px;
              margin-right: 6px;
            }
          }
        }
      }
      .student-wrap {
        display: flex;
        flex-wrap: wrap;
        .student-item {
          margin-right: 20px;
          margin-bottom: 20px;
          &:nth-child(3n + 3) {
            margin-right: 0;
          }
        }
      }
    }
  }
</style>
